<template>
  <div id="landingPage">
    <h1 class="con-right-title">
      落地页配置
    </h1>
    <!-- 搜索 -->
    <topSearch @toSearch="toSearch"></topSearch>
    <!-- 操作按钮部分 -->
    <div class="table-conBtn">
      <el-button type="warning" icon="el-icon-plus" @click="addEdit('add')">
        新增落地页
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table :data="tableData" v-loading="loading">
      <el-table-column label="序号" type="index" width="180" align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="落地页名称"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="启用时间" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.startDate || '——' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="停用时间" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.endDate || '——' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{
            row.landingPageStatus | filterName('landing_page_status')
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="链接" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.link || '——' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作人" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.updateBy.trueName || '——' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="180" align="center">
        <template slot-scope="{ row }">
          <el-button
            v-if="row.landingPageStatus === 'OPEN'"
            type="text"
            @click="disableEnable('disable', row)"
          >
            停用
          </el-button>
          <el-button v-else type="text" @click="disableEnable('enable', row)">
            启用
          </el-button>
          <el-button type="text" @click="addEdit('edit', row.id)">
            编辑
          </el-button>
          <el-button type="text" @click="deleteConfig(row)">
            删除
          </el-button>
          <el-button type="text" @click="addEdit('copy', row.id)">
            一键复制
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
  </div>
</template>
<script>
import topSearch from './topSearch'
import {
  landingPageList,
  disablePage,
  enablePage,
  delLandingPage
} from '@/api/activityCenter/landingPage'
import { sysNormalDisable } from '@utils/dictionariesFunc'
export default {
  components: {
    topSearch
  },
  data() {
    return {
      loading: false,
      tableData: [],
      searchParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0
    }
  },
  async mounted() {
    await sysNormalDisable('landing_page_status', 'landing_page_status')
    this.searchList()
  },
  methods: {
    /* 列表 */
    searchList() {
      this.loading = true
      landingPageList(
        this.searchParams,
        (res) => {
          this.loading = false
          this.tableData = res.rows
          this.total = res.total
        },
        (error) => {
          this.loading = false
        }
      )
    },
    //搜索
    toSearch(val) {
      this.searchParams.pageNum = 1
      Object.assign(this.searchParams, val)
      this.searchList()
    },
    /* 新增编辑落地页 */
    addEdit(type, id) {
      if (type === 'add') {
        this.$router.push({
          name: 'wh:activityCenter:landingPage:edit'
        })
      } else {
        this.$router.push({
          name: 'wh:activityCenter:landingPage:edit',
          query: { id, type }
        })
      }
    },
    /* 禁用启用落地页 */
    disableEnable(type, row) {
      const { id } = row
      const obj = { landingPageId: id, landingPageStatus: '' }
      if (type === 'disable') {
        obj.landingPageStatus = 'CLOSE'
        disablePage(id, obj, () => {
          this.$message.success('停用成功')
          this.searchList()
        })
      } else {
        obj.landingPageStatus = 'OPEN'
        enablePage(id, obj, () => {
          this.$message.success('启用成功')
          this.searchList()
        })
      }
    },
    /* 删除落地页 */
    deleteConfig(row) {
      const { id } = row
      this.$confirm('确定要删除此配置吗', '删除落地页配置', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delLandingPage(id, {}, () => {
            this.searchList()
          })
        })
        .catch(() => {})
    },
    /* 新增编辑刷新列表 */
    refresh() {
      this.searchList()
    }
  }
}
</script>
<style lang="less" scoped></style>
